<template>
  <div>
    <div class="scrollbar">
      <div class="title">
        vue2后台系统
      </div>
      <el-menu :collapse-transition="false" class="el-menu-vertical-demo" router :default-active="defaultActive"
        background-color="#FFFFFF" text-color="#000" active-text-color="#4080FF" :collapse="isCollapse">
        <el-menu-item @click="goli(menu)" v-if="menu.alwaysShow" :index="menu.url" v-for="(menu, index) in allmenu"
          :key="index">
          <i :class="[menu.icon]" class="icons"></i>
          <span style="margin-left: 10px">{{ menu.menuname }}</span>
        </el-menu-item>
        <el-submenu v-if="!menu.alwaysShow" :index="menu.url" v-for="(menu, index) in allmenu" :key="index">
          <template slot="title">
            <i :class="[menu.icon]" class="icons"></i>
            <span style="margin-left: 10px">{{ menu.menuname }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item @click="goli(chmenu)" v-for="chmenu in menu.menus" :index="chmenu.url" :key="chmenu.menuid">
              <i :class="chmenu.icon"></i>
              <span style="margin-left: 20px">{{ chmenu.menuname }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>

  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: 'index',
  data() {
    return {
      allmenu: [],
    }
  },
  watch:{
    $route(to, from) {
      if(to.meta.childrenUrl){
        this.SetDefaultActive(to.meta.childrenUrl)
      }else{
        this.SetDefaultActive(this.$route.path)
      }
    }
  },
  computed: {
    ...mapState(['isCollapse','defaultActive']),
  },
  mounted() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 21,
          icon: 'el-icon-user-solid',
          menuname: '首页',
          url: "/IndexView",
          alwaysShow: true
        },
        {
          menuid: 31,
          icon: 'el-icon-s-order',
          menuname: 'Echarts展示',
          url: "null",
          menus: [
            {
              menuid: 32,
              menuname: "折线图",
              url: "/EchartsZx",
              menus: null,
            },
            {
              menuid: 33,
              menuname: "柱状图",
              url: "/EchartsZz",
              menus: null,
            },
            {
              menuid: 34,
              menuname: "饼状图",
              url: "/EchartsBz",
              menus: null,
            }
          ],
        }
      ],
      msg: "success",
    };
    this.allmenu = res.data;
  },
  methods: {
    ...mapMutations(['SetDefaultActive']),
    goli(item) {
      this.$store.commit('SetMenu', item)
    }
  }
};
</script>
<style lang="scss">
.title {
  width: auto;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.scrollbar {
  height: calc(100vh - 50px);
  position: relative;
  overflow: auto;
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #ffffff;
}

.scrollbar::-webkit-scrollbar-button {
  display: none;
}

.scrollbar::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #e1e1e4;
}

.el-aside {
  width: 100%;
}

.el-menu-item:hover {
  background-color: #ffffff !important;
  color: #4080ff !important;
}

.el-submenu__title:hover {
  background-color: #ffffff !important;
  color: #4080ff !important;
}

.icons {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

.el-submenu__title:hover .icons {
  color: #4080ff !important;
}

.el-submenu.is-active>.el-submenu__title,
.el-submenu.is-active>.el-submenu__title .icons {
  color: #4080ff !important;
}
</style>